<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Bootstrap CSS文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <!-- 引入Bootstrap JS文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url("../img/logo_bg.jpg"); /* 替换为你的图片链接或者文件路径 */
            background-repeat: repeat; /* 禁止图片重复 */
            background-size: cover; /* 调整图片大小以覆盖整个背景 */
        }
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }
        /* 弹窗样式 */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .popup2 {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }

        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }

        select option {
            color: #555;
        }
        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }
        /* 让表格显示单双行效果 */
        tbody tr:nth-child(even):hover {
            background-color: #ffffcc;
        }

        tbody tr:nth-child(odd):hover {
            background-color: #ddd;
        }

        /* 让整个页面居中显示 */
        body {
            display: block;
            margin: 0 auto;
            height: 100vh;
        }


        /* 调整表格样式 */
        table {
            border-collapse: collapse;
            width: 80%;
            max-width: 800px;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>

</head>
<body>
<div class="container">
    <div class="content">
<form action="/admin/byConditions" method="post">
    <label for="username">用户名：</label>
    <input type="text"  name="username" id="username">
    <button type="submit">查询</button>
    <button type="button" onclick="addUser()">添加</button>
</form>
<table>
    <thead>
    <tr>
        <th>用户名</th>
        <th>密码名</th>
        <th>权限</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
        <td th:text="${user.username}">用户名</td>
        <td th:text="${user.password}">密码</td>
        <td th:text="${user.role}">权限</td>
        <td>
        <button th:attr="onclick='editUser(\''+${user.username}+'\',\''+${user.password}+'\',\''+${user.role}+'\')'">编辑</button>
        </td>
    </tr>
    </tbody>
</table>
<div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
    <form action="/admin/edituser" method="post"  id="myform">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="edit-username" readonly><br /><br />
        <label for="edit-password" >新密码：</label>
        <input type="text" name="password" id="edit-password" minlength="6" required ><br /><br />
        <label for="edit-role">新权限：</label>
       <select name="role" id="edit-role">
           <option>2</option>
           <option>1</option>
       </select>
        <button type="submit">保存</button>
        <button type="button" onclick="deleteUser()">删除</button>
        <button type="button" onclick="closebtn()">关闭</button>
    </form>
    </div>
<div class="popup2" id="popup2">
    <form action="/admin/addoneuser" method="post"  id="myform2">
        <label for="set-username">用户名：</label>
        <input type="text" name="username" id="set-username" required minlength="6"><br /><br />
        <label for="set-password" >密码：</label>
        <input type="text" name="password" id="set-password" minlength="6" required><br /><br />
        <label for="set-role">权限：</label>
        <select name="role" id="set-role">
            <option>2</option>
            <option>1</option>
        </select>
        <button type="submit">添加</button>
        <button type="button" onclick="closebtn()">关闭</button>
    </form>
</div>
<button onclick="goBack()">返回</button>
<button onclick=location.href="/page/mainmenu">首页</button>

</div>
</div>
<script>
    function deleteUser() {
        if (confirm("确定要删除吗？")) {
            document.getElementById("myform").action = "/admin/deleteuser";
            document.getElementById("myform").submit();
        }
    }
   function editUser(username, password, role) {
        document.getElementById("popup").style.display='block';
        document.getElementById("overlay").style.display='block'
       document.getElementById("edit-username").value=username;
       document.getElementById("edit-password").value = password;
       document.getElementById("edit-role").value = role;
    }
    function addUser() {
        document.getElementById("popup2").style.display='block';
        document.getElementById("overlay").style.display='block';
    }
    function closebtn() {
        document.getElementById("popup").style.display='none';
        document.getElementById("popup2").style.display='none';
        document.getElementById("overlay").style.display='none';
    }
    function goBack() {
        window.history.back();
    }
</script>
</body>
</html>